<template>
  <div style="display: flex;justify-content: center;">
<div v-if="!user" style="max-width: 1240px;min-width: 720px;width: 1240px;padding-right: 20px;
      padding-left: 20px;">
  <div>
      <ImageOverlay />
  </div>
  <div class="text-main">
      <div class="vertical-text bold">What can you do with our app?</div>
      <div class="vertical-text small">Features to replace all the annoying planning processes!</div>
  </div>
  <div style="margin-top: 50px;">
      <explore-list></explore-list>
  </div>
</div>
<div v-if="user" style="max-width: 1240px;min-width: 720px;width: 1240px;padding-right: 20px;
      padding-left: 20px;">
  <!-- <search-bar  @dataSent="handleDataSent" ></search-bar> -->
  <div  style="max-width: 1240px;min-width: 720px">
    <ImageOverlay />
</div>
 
  <popular-Guid-new  style="max-width: 1240px;min-width: 960px" :queryParam="queryParam"></popular-Guid-new>

  <div style="margin-bottom: 80px;"></div>


</div>
</div>
</template>

<script setup>
  import { ref, computed  } from 'vue';
  import ImageOverlay from '../../components/ImageOverlay/ImageOverlay.vue';
  import ExploreList from '@/components/ExploreList/index.vue';
  import SearchBar from '@/components/Home/search-bar.vue';
  import PopularGuid from '@/components/Home/popularGuid.vue';
  import PopularGuidNew from '@/components/Home/popularGuidNew.vue';
  import Continue from '@/components/Home/continue.vue';
  import { setToken,setUser,getUser } from '@/utils/auth'
  const search = ref(false)
  import { useStore } from 'vuex';
const store = useStore();
  store.commit('setFalseGuidEdit');
  const user = getUser()
  // 定义查询条件
  const queryParam = ref({
    page: 0,
    size: 30,
    hot: 1
  });
    // 定义查询条件
    const queryParam1 = ref({
    page: 0,
    size: 30
  });
    // 定义查询条件
    const queryParam2 = ref({
    page: 1,
    size: 10
  });
  
  // 定义 login 状态
  const login = ref(false);

  // 处理从子组件发送的数据
const handleDataSent = (data) => {
  // 合并 queryParam 和 data
  queryParam.value = { ...queryParam.value, ...data.value};
  search.value = true
  // 输出接收到的数据
  console.log('search:', queryParam.value);
};


function cancelSearch(params) {
  queryParam.value = {
    page: 0,
    size: 10,
    hot: 1
  };
  search.value = false
}


  </script>


<style scoped>
  @font-face {
font-family: 'CustomFont';
src: url('@/assets/fonts/DejaVuSansMono_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.text-main{
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.vertical-text {
  font-family: 'Outfit', sans-serif; 
}
.bold{
  font-size: x-large;
  font-weight: 800;
}
.small{
  font-size: larger;
  font-weight: 500;
  color: rgb(112, 112, 112);
}

</style>